<template>
  <div class="app-container">
    <el-form size="small" label-width="70px">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="客户分类">
            <treeselect
              disabled
              v-model="query.customerTypeIds"
              :options="typeList"
              placeholder="选择客户分类"
              style="width: 100%"
              :normalizer="normalizer"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
          <el-form-item label="客户区域">
            <treeselect
              disabled
              v-model="query.customerTypeIds"
              :options="areaList"
              placeholder="选择区域"
              style="width: 100%"
              :normalizer="normalizer"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--表格渲染-->
    <el-table ref="table" stripe border v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
              >
      <el-table-column :render-header="crud.renderHeader" type="index" width="60" label="序号"/>
      <!--<el-table-column :render-header="crud.renderHeader" v-if="columns.visible('id')" prop="id" label="id" />-->
      <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('orderId')" prop="userName" label="业务员"/>
      <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerName')" prop="customerName" label="拜访客户"/>
      <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerTypeName')" prop="customerTypeName" label="客户分类名称"/>
      <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('customerAreaName')" prop="customerAreaName" label="区域"/>
      <el-table-column :render-header="crud.renderHeader" v-if="columns.visible('visitDuration')" prop="visitDuration" label="拜访时长"/>
    </el-table>
    <!--分页组件-->
    <pagination/>
  </div>
</template>

<script>
  import crmCustVisitTable,{queryDetail} from '@/api/erp/reportSalesmanVisit'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import {getAreaTree} from "@/api/erp/basCustomerArea";
  import {getCustomerTypeTree} from "@/api/erp/basCustomerType";
  const data = JSON.parse(sessionStorage.getItem('year'))
  // crud交由presenter持有
  const defaultCrud = CRUD({
    title: '业务员巡店汇总报表详情', url: '/api/reportSalesmanVisit/queryDetail', sort: 'id,desc',
    params() {
      const href = location.href.split('/')
      return {
        userIds: href[href.length - 1].split('?')[0] == 'add' ? 0 : href[href.length - 1].split('?')[0],
      }
    },
    query:{
      ...data
    },
    crudMethod: {...crmCustVisitTable}
  })
  const defaultForm = {
    userIds: null,
    customerTypeId: null,
    areas: null
  }
  export default {
    name: 'customerVisitRecordTableView',
    components: {pagination, crudOperation, rrOperation, udOperation, Treeselect},
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    props:['userIds'],
    data() {
      return {
        typeList: [],
        areaList: [],
        columnNames: [],
        permission: {
          add: ['admin', 'reportSalesmanVisit:add'],
          edit: ['admin', 'reportSalesmanVisit:edit'],
          del: ['admin', 'reportSalesmanVisit:del'],
          import: ['admin', 'reportSalesmanVisit:import'],
          export: ['admin', 'reportSalesmanVisit:export'],
          copy: ['admin', 'reportSalesmanVisit:copy'],
          upload: ['admin', 'reportSalesmanVisit:upload'],
          download: ['admin', 'reportSalesmanVisit:download'],
        },

      }
    },
    created() {
      // const data = {
      //   year: this.date.split('-')[0],
      //   month:this.date.split('-')[1],
      //   customerAreaIds:this.customerAreaIds,
      //   customerTypeIds:this.customerTypeIds.join(','),
      //   userIds:this.userIds,
      //   groupColumn:'userId,customerTypeId,customerAreaId'
      // }
      this.getTypeList()
      this.getAreaList();
      // this.$nextTick(()=>{
      //   this.crud.refresh();
      // })
    },
    methods: {
      // toQuery(){
      //   const data ={
      //     year:this.$route.query.year,
      //     month:this.$route.query.month
      //   }
      //   queryDetail().then(res=>{
      //
      //   })
      // },
      getAreaList() {//区域
        getAreaTree().then(res => {
          this.areaList = res
        })
      },
      getTypeList() {
        getCustomerTypeTree({page: 0, size: 999}).then(res => {
          this.typeList = res;
        })
      },
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null || (node.children && node.children.length == 0)) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        const data = JSON.parse(sessionStorage.getItem('year'))
        this.crud.query = Object.assign({},data)
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
      },

    }
  }
</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
</style>
